import React, { useState } from 'react';
import { Button, Text, StyleSheet, ScrollView } from 'react-native';
import DemoContainer from '@common/demoContainer';

const App = ({ route }: any) => {
    const { params = {} } = route;

    const [allowFontScaling, setAllowFontScaling] = useState(true);

    const toggleAllowFontScaling = () => {
        setAllowFontScaling(!allowFontScaling);
    };

    return (
        <DemoContainer params={params}>
            <ScrollView style={styles.container}>
                <Button
                    title={allowFontScaling ?
                        t('component.text.maxFontSizeMultiplier.disableFontScaling') :
                        t('component.text.maxFontSizeMultiplier.enableFontScaling')}
                    onPress={toggleAllowFontScaling} />
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={0}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 0 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonText')}
                    <Text
                        style={[styles.text, styles.subText]}
                        maxFontSizeMultiplier={0}
                    >
                        {t('component.text.maxFontSizeMultiplier.comparisonTextWithParentValue', { childValue: 0, parentValue: 1 })}
                    </Text>
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={null}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 'null' })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={-1}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: -1 })}
                </Text>
                <Text style={styles.text} allowFontScaling={allowFontScaling} maxFontSizeMultiplier={1.15} >
                    {t('component.text.maxFontSizeMultiplier.comparisonText')}
                    <Text
                        style={[styles.text, styles.subText]}
                        maxFontSizeMultiplier={null}
                        allowFontScaling={allowFontScaling}
                    >
                        {t('component.text.maxFontSizeMultiplier.comparisonTextWithParentValue', { childValue: 'null', parentValue: 1.15 })}
                    </Text>
                </Text>
                <Text style={styles.text} allowFontScaling={allowFontScaling} maxFontSizeMultiplier={1} >
                    {t('component.text.maxFontSizeMultiplier.comparisonText')}
                    <Text
                        style={[styles.text, styles.subText]}
                        maxFontSizeMultiplier={-1}
                        allowFontScaling={allowFontScaling}
                    >
                        {t('component.text.maxFontSizeMultiplier.comparisonTextWithParentValue', { childValue: -1, parentValue: 1 })}
                    </Text>
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={0.5}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 0.5 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1.45}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonText')}
                    <Text
                        style={[styles.text, styles.subText]}
                        maxFontSizeMultiplier={1}
                        allowFontScaling={allowFontScaling}
                    >
                        {t('component.text.maxFontSizeMultiplier.comparisonTextWithParentValue', { childValue: 1, parentValue: 1.45 })}
                    </Text>
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 1 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1.15}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 1.15 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1.3}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 1.3 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1.45}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 1.45 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={1.75}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 1.75 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={2}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 2 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={3.2}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 3.2 })}
                </Text>
                <Text
                    style={styles.text}
                    maxFontSizeMultiplier={5}
                    allowFontScaling={allowFontScaling}
                >
                    {t('component.text.maxFontSizeMultiplier.comparisonTextWithValue', { value: 5 })}
                </Text>
            </ScrollView>
        </DemoContainer>
    );
};

const styles = StyleSheet.create({
    container: {
    },
    text: {
        fontSize: 16,
        padding: 5
    },
    subText: {
        color: 'red'
    }
});

export default App;